import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Modal, Input } from 'antd';
import './class.css';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      segment: '小学',
      gradeType: '一年级类型',
      standardName: '一年级',
      alias: '小一',
      grade: '一年级',
      isGraduation: '否',
    },
    {
      key: '2',
      segment: '小学',
      gradeType: '二年级类型',
      standardName: '二年级',
      alias: '小二',
      grade: '二年级',
      isGraduation: '否',
    },
    // 继续添加其他行数据，直到 14 行
    {
      key: '14',
      segment: '高中',
      gradeType: '高三年级类型',
      standardName: '高三',
      alias: '高三',
      grade: '高三',
      isGraduation: '是',
    },
  ]);

  const columns = [
    { title: '学段', dataIndex: 'segment', key: 'segment' },
    { title: '年级类型', dataIndex: 'gradeType', key: 'gradeType' },
    { title: '标准名称', dataIndex: 'standardName', key: 'standardName' },
    {
      title: '别名',
      dataIndex: 'alias',
      key: 'alias',
      render: (text, record) => <Input value={text} onChange={e => handleAliasChange(e.target.value, record.key)} />,
    },
    {
      title: '年级选择',
      dataIndex: 'grade',
      key: 'grade',
      render: (text, record) => (
        <Select value={text} onChange={value => handleGradeChange(value, record.key)} style={{ width: 120 }}>
          <Option value="一年级">一年级</Option>
          <Option value="二年级">二年级</Option>
          <Option value="三年级">三年级</Option>
          <Option value="四年级">四年级</Option>
          <Option value="五年级">五年级</Option>
          <Option value="六年级">六年级</Option>
          <Option value="七年级">七年级</Option>
          <Option value="八年级">八年级</Option>
          <Option value="九年级">九年级</Option>
          <Option value="十年级">十年级</Option>
          <Option value="十一年级">十一年级</Option>
          <Option value="十二年级">十二年级</Option>
          <Option value="十三年级">十三年级</Option>
          <Option value="十四年级">十四年级</Option>
        </Select>
      ),
    },
    {
      title: '是否毕业年级',
      dataIndex: 'isGraduation',
      key: 'isGraduation',
      render: (text, record) => (
        <Select value={text} onChange={value => handleIsGraduationChange(value, record.key)} style={{ width: 120 }}>
          <Option value="是">是</Option>
          <Option value="否">否</Option>
        </Select>
      ),
    },
  ];

  const handleAliasChange = (value, key) => {
    const newData = dataSource.map(item => {
      if (item.key === key) {
        return { ...item, alias: value };
      }
      return item;
    });
    setDataSource(newData);
  };

  const handleGradeChange = (value, key) => {
    const newData = dataSource.map(item => {
      if (item.key === key) {
        return { ...item, grade: value };
      }
      return item;
    });
    setDataSource(newData);
  };

  const handleIsGraduationChange = (value, key) => {
    const newData = dataSource.map(item => {
      if (item.key === key) {
        return { ...item, isGraduation: value };
      }
      return item;
    });
    setDataSource(newData);
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span>年级管理(校)</span>
        <Button type="primary">编辑模式</Button>
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="selectr" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div /> {/* 这里可以放置其他内容 */}
          <Button type="link" onClick={() => console.log('历史记录点击')}>
            历史记录
          </Button>
        </div>
        <Table dataSource={dataSource} columns={columns} pagination={false} />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
          <Button type="primary">整体提交</Button>
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
